<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title> 广告图片轮播切换</title>
    <link rel="stylesheet" href="css/style2.css">
</head>
<body>
<div class="adver">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
    <div class="arrowLeft"><</div><div class="arrowRight">></div>
</div>
<script src="js/jquery-1.12.4.js"></script>
<script type="text/javascript" >
    $(function () {
        var index=1;
        var $lis=$("li");
        $(".adver").mousemove(function () {
            $(".arrowLeft").show();$(".arrowRight").show();
        });
        $(".adver").mouseout(function () {
            $(".arrowLeft").hide();$(".arrowRight").hide();
        });

        $(".arrowRight").click(function () {
           if (index==6){
               alert("已经是最后一张了")
           }else {
               index=index+1;
               $("li:nth-of-type("+index+")").css("background","orange");
               $("li:nth-of-type("+index+")").siblings().css("background","#333333");
               $(".adver").css("background","url('images/adver0"+index+".jpg')");

           }
        });
        $(".arrowLeft").click(function () {
            if (index==1){
                alert("已经是第一张了")
            }else {
                index=index-1;
                $("li:nth-of-type("+index+")").css("background","orange");
                $("li:nth-of-type("+index+")").siblings().css("background","#333333");
                $(".adver").css("background","url('images/adver0"+index+".jpg')");

            }
        });
    });
</script>
</body>
</html>